<template>
  <div class="container">
    <div class="title">学习进度</div>
    <div class="circle">
      <van-circle
        v-model="currentRate"
        :rate="30"
        :speed="100"
        :text="text"
        layer-color="#ebedf0"
      />
    </div>
    <div class="collapse">
      <van-collapse v-model="activeNames">
        <van-collapse-item title="第一阶段:前端开发基础" name="1">html+css</van-collapse-item>
        <van-collapse-item title="第二阶段:前端开发基本功" name="2">js</van-collapse-item>
        <van-collapse-item title="第一阶段:前后端交互" name="3">ajax</van-collapse-item>
        <van-collapse-item title="第一阶段:后端开发" name="4">nodeJs</van-collapse-item>
        <van-collapse-item title="第一阶段:前端框架" name="5">Vue</van-collapse-item>
      </van-collapse>
    </div>
  </div>
</template>

<script>
export default {
  name: 'study-index',
  data () {
    return {
      currentRate: 0,
      activeNames: ['1']
    }
  },
  computed: {
    text () {
      return this.currentRate.toFixed(0) + '%'
    }
  }
}
</script>

<style scoped lang="less">
.container {
  background-color: rgb(245, 245, 245);
}
.title {
  width: 100%;
  height: 48px;
  background-color: #fff;
  text-align: center;
  line-height: 48px;
  font-weight: 700;
}
.circle {
  padding-top: 10px;
  margin-top: 10px;
  width: 100%;
  background-color: #fff;
  text-align: center;
  line-height: 48px;
}
.collapse{
  margin-top: 10px;
}
</style>
